<template>
  <!--  -->
  <layout className="message" title="消息中心" background="#fff">
    <template v-slot:right>
      <span @tap="oneKeyRead" class="oneKeyRead">一键已读</span>
    </template>

    <scroll-view
      v-if="list && list.length"
      :scroll-y="true"
      class="message-list"
      @lower-threshold="50"
      @scrolltolower="triggerToFetchList"
    >
      <u-swipe-action
        :show="item.show"
        :index="index"
        v-for="(item, index) in list"
        :key="item.id"
        @click="click"
        @open="open"
        :options="options"
        class="message-item-action"
      >
        <view class="message-item" @tap="readMessage(item.id)">
          <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
          <view
            :class="'message-item-wrap ' + (item.readFlg !== 1 ? 'unread' : '')"
          >
            <view class="header-wrap">
              <text class="message-item-title u-line-2">{{ item.title }}</text>
              <text class="message-item-subtitle u-line-2">{{ item.msg }}</text>
            </view>
            <u-line class="u-line"></u-line>
            <view class="footer-wrap"> {{ item.createTime }} </view>
          </view>
        </view>
      </u-swipe-action>
    </scroll-view>
    <view v-else-if="list === null" class="empty-message"> 加载中 </view>
    <view v-else-if="list && list.length === 0" class="empty-message">
      暂无数据
    </view>
  </layout>
</template>
<script>
export default {
  data() {
    return {
      list: null,
      disabled: false,
      btnWidth: 180,
      show: false,
      currentPageNum: 1,
      currentPageSize: 10,
      totalPage: 0,
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
    };
  },
  onLoad(option) {},
  onShow() {},
  created() {
    this.triggerToFetchList();
  },
  watch: {},
  methods: {
    readMessage(id) {
      this.$u.api.invokeMessageStatus({ id: id }).then((res) => {});
    },
    triggerToFetchList() {
      this.$u.api
        .getMessageList({
          pageNum: this.currentPageNum,
          pageSize: this.currentPageSize,
          type: "RUNNER",
        })
        .then((res) => {
          this.totalPage = res.data.totalPage;
          if (res.data.total === 0) {
            this.list = [];
            return;
          }
          if (this.currentPageNum > res.data.totalPage) {
            uni.showToast({ title: "没有更多消息", icon: "none" });
            return;
          }
          if (this.currentPageNum <= res.data.totalPage) {
            this.currentPageNum++;
            this.list = (this.list || [])
              .concat(res.data.list)
              .map((d) => ({ ...d, show: false }));
          }
          // this.list = (res.data.list || []).map((d) => ({ ...d, show: false }));
        });
    },
    click(index) {
      const that = this;
      this.$u.api
        .invokeDeleteMessage({ id: this.list[index].id })
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({ title: "删除成功", icon: "success" });
            that.triggerToFetchList();
          } else {
            uni.showToast({ title: res.message || "删除失败", icon: "none" });
          }
        });
      // this.list[index].show = false;
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },
    readMessage(id) {
      this.$u.api.invokeReadMessage({ id });
    },
    oneKeyRead() {
      const that = this;
      this.$u.api
        .invokeOneKeyReadMessage({
          type: "RUNNER",
        })
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({ title: "一键已读成功", icon: "none" });
            that.list = null;
            that.currentPageNum = 1;
            setTimeout(() => {
              that.triggerToFetchList();
            }, 500);
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.message-list {
  background: #ffffff;
  height: 100%;
  .message-item-action {
    padding: 20rpx 0;
  }
  /deep/.u-swipe-action {
    overflow: initial;
  }
}
.empty-message {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 50vh;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4b4b4b;
  line-height: 36rpx;
}
.oneKeyRead {
  padding-right: 32rpx;
}
.message-item {
  padding: 0 30rpx;
  width: 750rpx;
  &-title {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #282828;
    line-height: 36rpx;
  }
  &-subtitle {
    margin-top: 21rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4b4b4b;
    line-height: 36rpx;
  }

  /deep/.u-line {
    margin: 37rpx auto 27rpx !important;
  }
  &-wrap {
    position: relative;
    height: 270rpx;
    box-shadow: 15rpx 26rpx 42rpx 8rpx #eceef0;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 35rpx 36rpx;
    &.unread::after {
      content: " ";
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background: #ee3b32;
      position: absolute;
      right: 40rpx;
      top: 40rpx;
    }
  }
}
/deep/.u-swipe-content {
}
.header-wrap {
}

.footer-wrap {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #b5b5b5;
  line-height: 36rpx;
}
</style>
